<% I18n.locale = @locale %>
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta charset="utf-8">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
    <meta name="color-scheme" content="light dark">
    <meta name="supported-color-schemes" content="light dark">
    <!--[if mso]>
        <noscript>
          <xml>
            <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
              <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
          </xml>
        </noscript>
        <style>
          td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
        </style>
    <![endif]-->
    <title><%= I18n.t('user_mailer.email_invitation.subject') %></title>
    <style>
      img {
          max-width: 100%;
          vertical-align: middle;
          line-height: 1;
          border: 0
      }
      .my-12 {
          margin-top: 48px;
          margin-bottom: 48px
      }
      @media (max-width: 600px) {
          .sm-px-4 {
              padding-left: 16px !important;
              padding-right: 16px !important
          }
          .sm-px-6 {
              padding-left: 24px !important;
              padding-right: 24px !important
          }
          .sm-leading-8 {
              line-height: 32px !important
          }
      }
    </style>
  </head>
  <body style="margin: 0; width: 100%; background-color: #fff; padding: 0; -webkit-font-smoothing: antialiased; word-break: break-word">

    <div role="article" aria-roledescription="email" aria-label="Confirm your email address" lang="en">
      <div class="sm-px-4" style="background-color: #fff; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif">
        <table align="center" cellpadding="0" cellspacing="0" role="presentation">
          <tr>
            <td style="width: 600px; max-width: 100%">
              <table style="margin-top: 16px; width: 100%" cellpadding="0" cellspacing="0" role="presentation">
                <tr role="separator">
                  <td style="height: 48px; background-color: #000; text-align: center">
                    <img src="" width="47" style="max-width: 100%; vertical-align: middle; line-height: 1; border: 0;" alt="">
                  </td>
                </tr>
                <tr>
                  <td class="sm-px-6" style="border: 1px solid #cfcfcf; background-color: #fff; padding: 32px 40px; font-size: 16px; color: #334155; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)">
                    <h1 class="sm-leading-8" style="margin: 0 0 20px; font-size: 20px; font-weight: 600; color: #000">
                      <%= I18n.t('user_mailer.email_invitation.subject') %>
                    </h1>

                    <p style="margin-bottom: 16px; line-height: 24px">

                      <%= I18n.t('user_mailer.email_invitation.body', model_name: @model.name) %>
                    </p>

                    <div style="min-height: 46px;">
                      <a href="<%=@confirm_url %>" style="margin-bottom: 10px; display: inline-block; border-radius: 0px; background-color: #4338ca; padding: 16px 24px; font-size: 14px; font-weight: 600; line-height: 1; color: #f8fafc; text-decoration: none">
                        <!--[if mso]>
                            <i style="mso-font-width: -100%; letter-spacing: 32px; mso-text-raise: 30px" hidden>&nbsp;</i>
                            <![endif]-->
                             <span style="mso-text-raise: 16px">
                               <%= I18n.t('user_mailer.email_invitation.accept') %>
                             </span>
                             <!--[if mso]>
                                 <i style="mso-font-width: -100%; letter-spacing: 32px;" hidden>&nbsp;</i>
                                 <![endif]-->
                                  </a>
                    </div>

                    <p style="font-size: 14px;">
                      <%= I18n.t('user_mailer.confirm_email.browser_text') %>
                      <span href style="word-break: break-all; color: #4338ca;"><%=@confirm_url%></span>
                    </p>

                    <p style="margin-bottom: 0; font-size: 14px">
                      <%= I18n.t('user_mailer.confirm_email.expire_text_2') %>
                    </p>
                  </td>
                </tr>
                <tr>
                  <td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #475569">
                    <p style="margin: 16px 0">
                      Copyright©2023 OSS Compass. All Rights Reserved.
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>
